<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
  <h2>今天天气很{{info}}</h2>
  <button @click="changWeather">切换天气</button>
  <button @click="numbers.a++">{{numbers.a}}点我让a+1</button>
  <button @click="numbers.b++">{{numbers.b}}点我让b+1</button>
</div>
<script>
  const vm = new Vue({
    el: "#root",
    data() {
      return {
        isHot: true,
        numbers: {
          a: 1,
          b: 1,
        }
      }
    },
    computed: {
      info() {
        return this.isHot ? "炎热" : "凉爽";
      }
    },
    methods: {
      changWeather() {
        this.isHot = !this.isHot;
      }
    },
    //监视属性
    watch: {
      //监测单个数据
      isHot: {
        immediate: true,//初始化时让Handel调用一下，默认false
        //isHot发生改变时自动调用 传入参数，第一个新值，第二个旧值
        handler(newValue, oldValue) {
          console.log("isHot被修改了", newValue, oldValue)
        }
      },
      //监测深层单个数据
      'numbers.a': {
        handler(newValue, oldValue) {
          console.log("number被修改了", newValue, oldValue)
        }
      },
      // 监测深层全部数据
      // numbers: {
      //   //开启numbers下全部监测
      //   deep: true,
      //   handler(newValue, oldValue) {
      //     console.log("number被修改了", newValue, oldValue)
      //   }
      // },
    }
  });
  //外部调用监视(第二种写法)
  // vm.$watch('isHot', {
  //   immediate: true,//初始化时让Handel调用一下，默认false
  //   //isHot发生改变时自动调用 传入参数，第一个新值，第二个旧值
  //   handler(newValue, oldValue) {
  //     console.log("isHot被修改了", newValue, oldValue)
  //   }
  // })

</script>
</body>
</html>
